<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <title>Student List</title>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
        }

        h2 {
            text-align: center;
            margin-top: 30px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0px 0px 10px #aaa;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th.odd {
            background-color: lightgrey;
        }

        a.button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 20px;
            margin-bottom: 20px;
            cursor: pointer;
        }

        a.button:hover {
            background-color: #3e8e41;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<!--<body>-->
<!--<h2>学生列表</h2>-->
<!--<a href="form" th:href="@{/student/form}">添加学生</a>-->
<!--<table>-->
<!--	<thead>-->
<!--	<tr>-->
<!--		<th>选择</th>-->
<!--		<th>学生序号</th>-->
<!--		<th>学生学号</th>-->
<!--		<th>名字</th>-->
<!--		<th>姓名</th>-->
<!--		<th>性别</th>-->
<!--		<th>生日</th>-->
<!--		<th>删除</th>-->
<!--		<th>编辑</th>-->
<!--	</tr>-->
<!--	</thead>-->
<!--	<tbody>-->
<!--	<tr th:each="s, iterStat: ${students}" th:class="${iterStat.odd}? 'odd'">-->
<!--		<td><input type="checkbox" name="ids" th:value="${s.id}" /></td>-->
<!--		<td th:text="${iterStat.count}">1</td>-->
<!--		<td th:text="${s.no}">001</td>-->
<!--		<td th:text="${s.firstname}">John</td>-->
<!--		<td th:text="${s.lastname}">Doe</td>-->
<!--		<td th:text="${s.gender}">Male</td>-->
<!--		<td><a th:href="@{/student/view(id=${s.id})}">View</a></td>-->
<!--		<td><a th:href="@{/student/delete(id=${s.id})}">Delete</a></td>-->
<!--		<td><a th:href="@{/student/form(id=${s.id})}">Edit</a></td>-->
<!--	</tr>-->
<!--	</tbody>-->
<!--</table>-->
<!--<form action="#" th:action="@{/student/deleteBatch}" method="post">-->
<!--	<button type="submit">删除</button>-->
<!--</form>-->
<!--</body>-->
<body>
<h2>学生列表</h2>
<form action="#" th:action="@{/student/form}" method="get">
    <button type="submit">添加学生</button>
</form>
<form action="#" th:action="@{/student/deleteBatch}" method="post" onsubmit="return validate()">
    <button type="submit">删除</button>
    <table>
        <thead>
        <tr>
            <th>选择</th>
            <th>学生序号</th>
            <th>学生学号</th>
            <th>名字</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>删除</th>
            <th>编辑</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="s, iterStat: ${students}" th:class="${iterStat.odd}? 'odd'">
            <td><input type="checkbox" name="ids" th:value="${s.id}"/></td>
            <td th:text="${iterStat.count}">1</td>
            <td th:text="${s.no}">001</td>
            <td th:text="${s.firstname}">John</td>
            <td th:text="${s.lastname}">Doe</td>
            <td th:text="${s.gender}">Male</td>
            <td><a th:href="@{/student/view(id=${s.id})}">View</a></td>
            <td><a th:href="@{/student/delete(id=${s.id})}">Delete</a></td>
            <td><a th:href="@{/student/form(id=${s.id})}">Edit</a></td>
        </tr>
        </tbody>
    </table>
</form>
</body>
<script>
    function validate() {
        var checkboxes = document.getElementsByName("ids");
        var checked = false;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                checked = true;
                break;
            }
        }
        if (!checked) {
            alert("未选择任何学生");
            return false;
        }
        return true;
    }
</script>
</html>
